<template>
	<view class="sciencePopular-container">
		<view class="sciencePopular-search">
			<view class="search-img"><image src="/static/search.png"></image></view>
			<view class="search-text">搜症状/体质 |</view>
			<input type="text" placeholder="找中医方案"/>
		</view>
		<view class="sciencePopular-core">
			<view class="core-box"  @click="goToArticleList(1)">
				<view class="core-img"><image src="/static/core3.png"></image></view>
				<text class="core-text">医学知识</text>
			</view>
			<view class="core-box"  @click="goToArticleList(2)">
				<view class="core-img"><image src="/static/core4.png"></image></view>
				<text class="core-text">四时养生</text>
			</view>
			<view class="core-box"  @click="goToArticleList(3)">
				<view class="core-img"><image src="/static/core5.png"></image></view>
				<text class="core-text">食疗药膳</text>
			</view>
		    <view class="core-box"  @click="goToArticleList(4)">
				<view class="core-img"><image src="/static/core2.png"></image></view>
				<text class="core-text">名家医案</text>
			</view>
		</view>
	<view class="sciencePopular-headline">
	  <view class="headline-title">健康头条</view>
	  <view class="headline-bigBox">
	    <view 
	      class="bigBox-box" 
	      v-for="headline in headlines" 
	      :key="headline.id" 
	      @click="goToArticleDetail(headline.id)"
	    >
	      <view class="box-img"><image :src="headline.image"></image></view>
	      <text class="box-title">{{headline.title}}</text>
	      <view class="box-read">
	        <view class="read-img"><image src="/static/read.png"></image></view>
	        <text class="read-text">{{formatViewCount(headline.viewCount)}}阅读</text>
	      </view>
	      <view class="box-like">
	        <view class="like-img"><image src="/static/like.png"></image></view>
	        <text class="like-text">{{headline.likeCount}}</text>
	      </view>
	    </view>
	  </view>
	</view>
		<pc-article></pc-article>
	</view>
</template>

<script setup>
	import { reactive,ref,onMounted } from "vue";
	import { article,getArticleDetail} from '@/api/article';
	import  pcArticle  from '@/components/pcArticle.vue';
	
		const goToCamera =()=>{
			uni.switchTab({
				url:"/pages/camera/camera"
			})
		}
		const goToDoctor =()=>{
			uni.navigateTo({
				url:"/pages/doctor/doctor"
			})
		}
		const goToSciencePopular =()=>{
			uni.navigateTo({
				url:"/pages/sciencePopular/sciencePopular"
			})
		}
		
		const goToArticleList = (type) => {
				uni.navigateTo({
					url: `/pages/sciencePopular/articleList?type=${type}`
				});
			};
			
		const goToArticleDetail = (id) => {
				uni.navigateTo({
					url: `/pages/sciencePopular/articleDetail?id=${id}`
				});
			};
		
		// 日期格式化函数
		const formatDate = (dateStr) => {
		  if (!dateStr) return "";
		  const date = new Date(dateStr);
		  return `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, "0")}月${String(date.getDate()).padStart(2, "0")}日`;
		};
		
		// 获取文章列表
		const fetchArticleList = async () => {
		  uni.showLoading({
		    title: '加载中...',
		    mask: true
		  });
		  try {
		    // 1. 获取文章列表
		    const response = await article({ type: 0 });
		    if (response.code === "200") {
				
		      // 2. 为每个文章获取详情数据
		      const articlesWithDetails = await Promise.all(
		        response.data.records.map(async item => {
		          try {
		            const detailResponse = await getArticleDetail({id:item.id});
		            if (detailResponse.code === "200") {
		              return {
		                id: item.id.toString(),
		                image: item.coverImg || '/static/science1.png',
		                title: item.title,
		                viewCount: detailResponse.data.viewCount || 0,
		                likeCount: Math.floor(Math.random() * 500), // 随机生成点赞数
		                author: "岭南罗氏妇科",
		                date: formatDate(item.createTime)
		              };
		            }
		          } catch (error) {
		            console.error(`获取文章${item.id}详情失败:`, error);
		            return {
		              id: item.id.toString(),
		              image: item.coverImg || '/static/science1.png',
		              title: item.title,
		              viewCount: 0, // 默认值
		              likeCount: Math.floor(Math.random() * 500),
		              author: "岭南罗氏妇科",
		              date: formatDate(item.createTime)
		            };
		          }
		        })
		      );
		
		      // 3. 按viewCount降序排序
		      const sortedArticles = articlesWithDetails.sort((a, b) => b.viewCount - a.viewCount);
		
		      // 4. 取前5条作为头条数据
		      headlines.value = sortedArticles.slice(0, 5);
		
	
		      
		      uni.hideLoading({
		        success: (response) => {
		        },
		        complete: response => {
		        }
		      });
		    }
		  } catch (error) {
		    console.error("获取文章列表失败:", error);
		    uni.hideLoading({
		      success: (response) => {
		      },
		      complete: response => {
		      }
		    });
		  }
		};
		
		// 格式化阅读量
		const formatViewCount = (count) => {
		  if (count >= 1000) {
		    return (count / 1000).toFixed(1) + 'k';
		  }
		  return count;
		};
		
		// 组件挂载后调用接口
		onMounted(() => {
		  fetchArticleList();
		});
		
		const headlines = ref([]);
	
</script>

<style lang="scss">
	.sciencePopular-container{
		height: 100vh;
		width: 750rpx;
		background-color: #F8F5FF;
		position: relative;
		.sciencePopular-search{
			position: absolute;
			left: 50%;
			top: 20rpx;
			transform: translateX(-50%);
			width: 696rpx;
			height: 60rpx;
			background-color: #ffffff;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			.search-img{
				width: 36rpx;
				height: 36rpx;
				margin-left: 24rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.search-text{
				font-size: 25rpx;
				color: #5C5C93;
				margin-left: 24rpx;
			}
			input{
				flex: 1;
				height: 100%;
				font-size: 25rpx;
				margin-left: 8rpx;
			}
		}
		.sciencePopular-core{
			width: 630rpx;
			height: 140rpx;
			position: absolute;
			top: 130rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: space-between;
			.core-box{
				width: 315rpx;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.core-img{
					width: 84rpx;
					height: 84rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.core-text{
					font-size: 25rpx;
					font-weight: 700;
					color: #000000;
					margin-top: 10rpx;
				}
			}
		}
		.sciencePopular-headline{
			position: absolute;
			top: 300rpx;
			width: 750rpx;
			height: 500rpx;
			background-color: #EFECFF;
			.headline-title{
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				font-size: 35rpx;
				color: #000000;
			}
			.headline-bigBox{
				position: absolute;
				top: 85rpx;
				left: 20rpx;
				width: 710rpx;
				height: 380rpx;
				display: flex;
				flex-wrap: nowrap;
				overflow-x: auto; /* 允许水平滚动 */
				-webkit-overflow-scrolling: touch; /* 在iOS上实现平滑滚动 */
				scrollbar-width: none;
				.bigBox-box{
					width: 404rpx;
					height: 376rpx;
					background-color: #ffffff;
					position: relative;
					border-radius: 20rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
					.box-img{
						width: 100%;
						height: 256rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.box-title{
						position: absolute;
						top: 265rpx;
						left: 10rpx;
						font-size: 22rpx;
						color: #000000;
						width: 384rpx;
						letter-spacing: 1rpx;
					}
					.box-read{
						position: absolute;
						left: 15rpx;
						bottom: 5rpx;
						width: 140rpx;
						height: 40rpx;
						display: flex;
						.read-img{
							width: 32rpx;
							height: 32rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.read-text{
							font-size: 20rpx;
							color: #6B7280;
							margin-left: 5rpx;
							line-height: 40rpx;
						}
					}
					.box-like{
						position: absolute;
						left: 310rpx;
						bottom: 5rpx;
						width: 90rpx;
						height: 40rpx;
						display: flex;
						.like-img{
							width: 32rpx;
							height: 32rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.like-text{
							font-size: 20rpx;
							color: #6B7280;
							margin-left: 5rpx;
							line-height: 40rpx;
						}
					}
				}
			}
		}
		pc-article{
			position: absolute;
			top: 820rpx;
			left: 50%;
		}
	}
</style>